<template>
   <section class="search">
      <!-- 头部标题-开始 -->
      <HeaderTop title="搜索" />
      <!-- 头部标题-结束 -->
      <form class="search_form" @submit.prevent="dosearch">
         <input
            type="search"
            name="search"
            placeholder="请输入商家或美食名称"
            class="search_input"
            v-model="kwd"
         />
         <input type="submit" name="submit" class="search_submit" />
      </form>
      <section class="shop-list">
         <ShopList title="搜素结果" :shoplist="search_res" />
      </section>
   </section>
</template>

<script>
import HeaderTop from "@/components/HeaderTop/HeaderTop";
import ShopList from "@/components/ShopList/ShopList";
//vux
import { mapMutations, mapState } from "vuex";
//ajax
import { getpwdShops } from '@/api/ajax'
//vant
import { Toast } from 'vant'

export default {
   data() {
      return {
         kwd: '', // 搜索的关键字
         currentPage: 1, // 当前页
      }
   },
   components: {
      HeaderTop, ShopList,
   },
   mounted() {
      this.kwd = this.search_kwd || ''
      // 初始化搜索列表
      this.dosearch()
   },
   computed: {
      ...mapState('mstite', ['shoplist']),
      ...mapState("search", ['search_res', 'search_kwd']),
   },
   methods: {
      ...mapMutations('search', ['SAVE_SEARCH_RES', 'CLEAR_SEARCH_RES']),
      dosearch() {
         let kwd = this.kwd ? this.kwd.trim() : ''
         getpwdShops(kwd).then(({msg, shops}) => {
            if (msg !== 'ok') Toast('未找到')
            else {
               for(let obj of shops) {
                  obj.logo = 'http://admi-yuliner.oss-cn-hangzhou.aliyuncs.com/shoplist/' + obj.logo
               }
               // 将数据存储到状态中
               this.SAVE_SEARCH_RES({shops, kwd})
            }
         })
      }
   }
};
</script>

<style scoped lang="stylus">
@import '../../common/stylus/mixins.styl';

.search { // 搜索
   width: 100%;
   min-height: 100vh;
   padding: 45px 0 50px;
   box-sizing: border-box;

   .search_form {
      clearFix();
      background-color: #fff;
      padding: 12px 8px;

      input {
         height: 35px;
         padding: 0 4px;
         border-radius: 2px;
         font-weight: bold;
         outline: none;

         &.search_input {
            float: left;
            width: 79%;
            border: 4px solid #f2f2f2;
            font-size: 14px;
            color: #333;
            background-color: #f2f2f2;
         }

         &.search_submit {
            float: right;
            width: 18%;
            padding: 4px;
            font-size: 16px;
            color: #fff;
            background: var(--theme) var(--bgimg);
            background-image: cover;
            cursor: pointer;
         }
      }
   }
}
</style>